<template>
    <div style="margin-left: 30px; margin-top: 10px;width: 100%">
        <!--表格头部-->
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="部门">
                <el-input placeholder="请输入部门" v-model="sectionSearch"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="nameSearch" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="培训内容">
                <el-input v-model="contentSearch" placeholder="培训内容"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="selectSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="trainDetail" style="width: 100%" :row-class-name="tableRowClassName">
            <el-table-column prop="section" label="部门" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="90"></el-table-column>
            <el-table-column prop="content" label="培训内容"></el-table-column>

            <el-table-column prop="beginTime" label="开始时间" width="180"></el-table-column>
            <el-table-column prop="endTime" label="结束时间" width="180"></el-table-column>
            <el-table-column prop="contentTimes" label="文件时长(分钟)" width="180"></el-table-column>
            <el-table-column prop="trainingTime" label="学习时长(分钟)" width="180"></el-table-column>
            <!--<el-table-column prop="addUpTime" label="累计总时长(分钟)" width="180"></el-table-column>-->
        </el-table>
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total, prev, pager, next"
            :current-page="currentPage"
            :page-size="15"
            :total="count"
        ></el-pagination>
    </div>
</template>
<script>
    //导入需要使用的方法
    import { getTrainDetail } from "@/api/train";
    import moment from "moment";




    export default {
        name: "TrainDetails",
        //返回的数据，和页面交互
        data() {
            return {
                sectionSearch: "",
                nameSearch: "",
                contentSearch: "",
                //中间加一层
                sectionGo: "",
                nameGo: "",
                contentGo: "",
                trainDetail: [
                    {
                        section: "",
                        name: "",
                        content: "",
                        beginTime: "",
                        addUpTime: "",
                        trainingTime:"",
                        contentTimes:"",
                        endTime: ""
                    }
                ],
                currentRow: null,
                offset: 0,
                limit: 15,
                count: 0,
                currentPage: 1
            };
        },
        beforeRouteEnter: (to, from, next) => {
            // 注意，一定要在 next 中请求，因为该方法调用时 Vue 实例还没有创建，此时无法获取到 this 对象，在这里使用官方提供的回调函数拿到当前实例
            next(vm => {
                vm.initData();
            });
        },

        methods: {
            tableRowClassName({ row, rowIndex }) {
                if (rowIndex === 1) {
                    return "warning-row";
                } else if (rowIndex === 3) {
                    return "success-row";
                }
                return "";
            },
            //根据条件查询数据
            selectSubmit() {
                //将参数传递到后台 sectionSearch:部门  nameSearch: 姓名  addUpTimeSearch: 累计总时长
                //调用方法
                //将返回的数据给 trainReport
                this.sectionGo = this.sectionSearch;
                this.nameGo = this.nameSearch;
                this.contentGo = this.contentSearch;

                this.getTrain();
            },
            //初始化数据
            initData() {
                this.sectionSearch = "";
                this.nameSearch = "";
                this.contentSearch = "";
                //中间加一层
                this.sectionGo= "";
                this.nameGo= "";
                this.contentGo= "";
                this.offset= 0;
                this.limit= 15;
                this.count= 0;
                this.currentPage= 1
                this.trainDetail.splice(0);
                // this.trainReport.splice(0);
                this.getTrain();
            },
            //绑定方法
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.offset = (val - 1) * this.limit;
                this.getTrain();
            },
            //异步请求获取数据
            getTrain() {
                getTrainDetail({
                    begin: this.offset,
                    end_y: this.limit,
                    staff_id: this.$route.params.id,
                    user_name: this.nameGo,
                    dept_name: this.sectionGo,
                    content: this.contentGo
                }).then(res => {
                    this.count = res.total;
                    this.trainDetail = [];
                    res.queryList.forEach(item => {
                        const TrainDetail = {};
                        TrainDetail.section = item.dept_name;
                        TrainDetail.name = item.username;
                        TrainDetail.content = item.content;

                        TrainDetail.beginTime = moment(item.begin_time).format("YYYY-MM-DD HH:mm:ss")
                        // TrainDetail.beginTime =  dateFormat("YYYY-mm-dd HH:MM", item.begin_time)
                        TrainDetail.addUpTime = item.cumulative_time;
                        TrainDetail.trainingTime=item.training_time;
                        TrainDetail.endTime = item.end_time;
                        TrainDetail.contentTimes = item.content_times;
                        TrainDetail.endTime = moment(item.end_time).format("YYYY-MM-DD HH:mm:ss")
                        this.trainDetail.push(TrainDetail);
                    });
                });
            },
            dateFormat(fmt, date) {
                let ret;
                const opt = {
                    "Y+": date.getFullYear().toString(), // 年
                    "m+": (date.getMonth() + 1).toString(), // 月
                    "d+": date.getDate().toString(), // 日
                    "H+": date.getHours().toString(), // 时
                    "M+": date.getMinutes().toString(), // 分
                    "S+": date.getSeconds().toString() // 秒
                    // 有其他格式化字符需求可以继续添加，必须转化成字符串
                };
                for (let k in opt) {
                    ret = new RegExp("(" + k + ")").exec(fmt);
                    if (ret) {
                        fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                    };
                };
                return fmt;
            }
        },
        filters: {
            formatDate: function(value) {
                return moment(value).format("YYYY-MM-DD HH:mm:ss");
            }
        }
    };
</script>

<style scoped>
</style>
